<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>对props进行限制</title>
	</head>
	<body>
		<!-- 准备好一个“容器” -->
		<div id="test1"></div>
		<div id="test2"></div>
		<div id="test3"></div>

		<!-- 引入react核心库 -->
		<script type="text/javascript" src="./js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="./js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="./js/babel.min.js"></script>
		<!-- 引入prop-types，用于对组件标签属性进行限制 -->
		<script type="text/javascript" src="./js/prop-types.js"></script>

		<script type="text/babel">
			//创建组件
		class Person extends React.Component{

			constructor(props){
				//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
				// console.log(props);
				super(props)
				console.log('constructor',this.props);
			}

			//对标签属性进行类型、必要性的限制
			static propTypes = {
				name:PropTypes.string.isRequired, //限制name必传，且为字符串
				sex:PropTypes.string,//限制sex为字符串
				age:PropTypes.number,//限制age为数值
			}

			//指定默认标签属性值
			static defaultProps = {
				sex:'男',//sex默认值为男
				age:18 //age默认值为18
			}
			
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age+1}</li>
					</ul>
				)
			}
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
	</body>
</html>